<template>
  <div>
    <el-dialog
      title="编辑纠纷信息"
      :visible.sync="open"
      width="500px"
      :before-close="close">
      <el-form size="small" :model="form" :rules="rules" ref="formRef"
               label-width="120px">
        <el-form-item label="纠纷凭证：" prop="disputeImg">
          <image-upload v-model="form.disputeImg" :is-show-tip="false" width="50px"
                        height="50px"/>
        </el-form-item>
        <el-form-item label="退款类型：" prop="disputeResult">
          <el-select size="small" v-model="form.disputeResult" placeholder="请选择退款类型">
            <el-option v-for="(item,index) in dict.type.refund_type" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款金额：" prop="disputeAmount" v-if="form.disputeResult == '1'">
          <el-input size="small" v-model="form.disputeAmount" placeholder="请输入退款金额"/>
        </el-form-item>
        <el-form-item label="罚款金额：" prop="fine">
          <el-input size="small" v-model="form.fine" placeholder="请输入罚款金额"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {uploadLogisticsProof} from "@/api/order/supplementOrder";

export default {
  name: 'order-list',
  dicts: ['refund_type'],
  props: {
    voucherInfo: {
      type: Object,
      default: {}
    },
    orderId: {
      type: String / Number
    },
  },
  data() {
    return {
      open: true,
      form: {},//国内运单号信息
      rules: { // 线上发货表单校验
        disputeImg: [{required: true, message: '请上传纠纷凭证', trigger: 'change'}],
        disputeResult: [{required: true, message: '退款类型不能为空', trigger: 'change'}],
        disputeAmount: [{required: true, message: '退款金额不能为空', trigger: 'blur'}],
        fine: [{required: true, message: '罚款金额不能为空', trigger: 'blur'}]
      },
    }
  },
  mounted() {
    this.getVoucherInfo()
  },
  methods: {
    // 获取已上传的凭证和运单号信息
    getVoucherInfo() {
      if (this.voucherInfo) {
        this.form = {
          disputeImg: this.voucherInfo.disputeImg,
          disputeAmount: this.voucherInfo.disputeAmount,
          disputeResult: this.voucherInfo.disputeResult.toString(),
          fine: this.voucherInfo.fine,
          orderId: this.orderId
        }
      } else {
        this.form = {
          disputeImg: undefined,
          disputeAmount: undefined,
          disputeResult: undefined,
          fine: undefined,
          orderId: this.orderId
        }
      }
    },
    // 确定国内运单号
    confirm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          uploadLogisticsProof(this.form).then(res => {
            this.$message.success(res.msg)
            this.close()
          })
        }
      })
    },
    // 关闭线上发货弹窗
    close() {
      this.$emit('closeDisputeVoucherModal', false)
    },
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
